import React, {PureComponent} from 'react';
import {
  View,
  StyleSheet,
  Text,
  TextInput,
  Modal,
  Image,
  TouchableOpacity,
  Keyboard,
  KeyboardAvoidingView,
  TouchableWithoutFeedback,
  PermissionsAndroid,
  DeviceEventEmitter,
  Platform,
  Dimensions,
} from 'react-native';

import I18n from 'react-native-i18n';
import {connect} from 'react-redux';
import BaseComponent from '../base/BaseComponent';
import {
  ImageButton,
  LinearBoardButton,
  LinearButton,
  TextButton,
} from '../../components/Button';
import {NormalHeader} from '../../components/NavigationHeader';
import {follow, query, updateUser, rewardSignin} from '../../api/user';
import {showToast} from '../../components/Toast';
import {userLogout} from '../../redux/action';
import Clipboard from '@react-native-community/clipboard';
import {BASE_API} from '../../config';
import LinearGradient from 'react-native-linear-gradient';
import {ScrollView} from 'react-native-gesture-handler';
import {rnCodeVersion} from '../../config/index';
import {NAVIGATION_HEIGHT} from '../../config/LayoutConstants';
import {Colors} from '../../styles/common';

var moment = require('moment');
const {width, height} = Dimensions.get('window');

class UserInfoScreen extends BaseComponent {
  constructor(props) {
    super(props);
    this.subscription = null;

    console.log(props.navigation.state);

    let readUser =
      props.navigation.state.params && props.navigation.state.params.user
        ? props.navigation.state.params.user
        : props.userInfo;

    console.log(readUser);

    this.state = {
      isMyself: props.userInfo.identify == readUser.identify,
      signAnimModal: false,
      signModal: false,
      user: {
        id: readUser.identify,
        nickName: readUser.nickName,
        followerNum: readUser.fansAmount,
        followingNum: readUser.followAmount,
        bio: readUser.introduction,
        userId: readUser.identify,
        relaction: readUser.relationship,
        inviteAmout: readUser.inviteAmout,
        nftAmount: readUser.nftAmount,
        joinClub: readUser.joinClub,
        signinDays: readUser.signinDays | 0,
        signinDate: readUser.signinDate,
        avatar:
          readUser.image.indexOf('http') == -1
            ? BASE_API + readUser.image
            : readUser.image,
      },
    };
  }
  _apply = () => {};

  _signin = () => {
    rewardSignin({
      userToken: this.props.userInfo.token,
    }).then((resp) => {
      this.setState({
        signAnimModal: true,
      });
      this._queryUserInfo();
    });
  };

  _follow = () => {
    follow({
      userToken: this.props.userInfo.token,
      identify: this.state.user.id,
      event: this.state.user.relaction ? 0 : 1,
    })
      .then((res) => {
        showToast('success!');

        this.setState({
          user: {
            ...this.state.user,
            relaction: !this.state.user.relaction,
          },
        });
      })
      .catch((err) => {
        console.log('follow错误');
        console.log(err);
      });
  };

  _queryUserInfo = () => {
    if (this.state.isMyself) {
      query({
        userToken: this.props.userInfo.token,
      }).then((resp) => {
        console.log('query userinfo', resp);

        let user = resp.data;
        this.setState({
          user: {
            ...this.state.user,
            signinDate: user.signinDate,
            signinDays: user.signinDays | 0,
            joinClub: user.joinClub,
          },
        });
      });
    }
  };

  hasSignin = () => {
    console.log('hasSignin', this.state.user.signinDate + '---');
    if (!this.state.user.signinDate) {
      return false;
    }
    return moment().isSame(this.state.user.signinDate, 'day');
  };

  componentWillUnmount() {
    this.subscription.remove();
  }
  async componentDidMount() {
    this._queryUserInfo();
    this.subscription = DeviceEventEmitter.addListener(
      'UserInfoChanged',
      (param) => {
        this._queryUserInfo();
      },
    );
    if (Platform.OS !== 'android') return;

    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.CAMERA,
        {
          title: 'sign club Camera Permission',
          message:
            'sign club needs access to your camera ' +
            'so you can take awesome pictures.',
          buttonNeutral: 'Ask Me Later',
          buttonNegative: 'Cancel',
          buttonPositive: 'OK',
        },
      );
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        console.log('You can use the camera');
      } else {
        console.log('Camera permission denied');
      }
    } catch (err) {
      console.warn(err);
    }
  }

  formatNum = (num) => {
    if (!num) return '0';
    return num >= 1e3 && num < 1e4
      ? (num / 1e3).toFixed(1) + 'k'
      : num >= 1e4
      ? (num / 1e4).toFixed(1) + 'w'
      : num;
  };

  logout = async () => {
    try {
      this.props.navigation.state.params.quit();
    } catch (err) {}

    //退出
    DeviceEventEmitter.emit('userQuitRoom', {
      needQuitRoomScreen: false,
    });

    await this.props.userLogout();
    this.props.navigation.navigate('Login');
  };

  renderSignin = () => {
    // if (!this.props.userInfo.disableGift) {
    //   return (
    //     <LinearButton
    //       buttonStyle={{
    //         width: 70,
    //         height: 30,
    //       }}
    //       text={this.state.user.joinClub ? 'Sign in' : 'Apply'}
    //       onPress={() => {
    //         if (this.state.user.joinClub) {
    //           this.setState({
    //             signModal: true,
    //             signAnimModal: false,
    //           });
    //         } else {
    //           this.props.navigation.navigate('ApplyClub');
    //         }
    //       }}></LinearButton>
    //   );
    // }
    return null;
  };

  renderComponent = () => {
    var user = this.state.user;
    var signModal = this.state.signModal;
    var signAnimModal = this.state.signAnimModal;
    var hasSignin = this.hasSignin();
    return (
      <View style={{flex: 1, backgroundColor: '#fff'}}>
        <NormalHeader
          navigation={this.props.navigation}
          text="Info"
          left={{
            icon: require('../../assets/common/common_back_white.png'),
            onPress: () => {
              Keyboard.dismiss();
              this.props.navigation.goBack();
            },
          }}
          // right={
          //   this.state.isMyself
          //     ? {
          //         icon: require('../../assets/common/common_share.png'),
          //         onPress: () => {
          //           this.props.navigation.navigate('InviteFriend');
          //         },
          //       }
          //     : {}
          // }
        />
        <ScrollView
          style={{
            backgroundColor: '#160231',
          }}>
          <View
            style={{
              backgroundColor: '#160231',
              height: 40,
              paddingTop: 30,
            }}></View>
          <View
            style={{
              marginTop: -40,
              paddingTop: 30,
              paddingBottom: 20,
              backgroundColor: 'white',
              borderTopLeftRadius: 30,
              borderTopRightRadius: 30,
            }}>
            <View
              style={{
                paddingHorizontal: 20,
                flexDirection: 'row',
                justifyContent: 'space-between',
                alignItems: 'center',
              }}>
              <View
                style={{
                  position: 'relative',
                }}>
                <Image
                  style={{width: 80, height: 80, borderRadius: 40}}
                  source={{uri: user.avatar}}
                />
                {this.state.user.joinClub ? (
                  <Image
                    style={{
                      width: 50,
                      height: 30,
                      position: 'absolute',
                      bottom: 0,
                      right: -10,
                    }}
                    source={require('../../assets/user/vip.png')}
                  />
                ) : null}
              </View>
              <View style={{flex: 1, marginLeft: 20}}>
                <View style={{flexDirection: 'row', alignItems: 'center'}}>
                  <Text
                    style={{
                      color: Colors.fontPurpleColorDark,
                      fontSize: 18,
                      fontWeight: 'bold',
                      lineHeight: 25,
                    }}>
                    {user.nickName}
                  </Text>
                  {this.state.isMyself ? (
                    <ImageButton
                      source={require('../../assets/user/modify.png')}
                      imageStyle={{width: 16, height: 16, marginLeft: 6}}
                      onPress={() => {
                        this.props.navigation.navigate('EditUserInfo', {
                          refresh: (nickName, bio) => {
                            this.setState({
                              user: {
                                ...this.state.user,
                                nickName,
                                bio,
                              },
                            });
                          },
                        });
                      }}></ImageButton>
                  ) : null}
                </View>
                <View style={{flexDirection: 'row', marginTop: 5}}>
                  <Text style={{color: '#8A7B6C', fontSize: 14}}>
                    @{user.id}
                  </Text>
                </View>
              </View>
              {this.state.isMyself ? (
                this.renderSignin()
              ) : user.relaction == 1 ? (
                <LinearBoardButton
                  buttonStyle={{
                    width: 120,
                    height: 30,
                  }}
                  text={I18n.t('room.followed')}
                  onPress={this._follow}></LinearBoardButton>
              ) : (
                <LinearButton
                  buttonStyle={{
                    width: 120,
                    height: 30,
                  }}
                  text={I18n.t('room.follow')}
                  onPress={this._follow}></LinearButton>
              )}
            </View>

            <View
              style={{
                flexDirection: 'row',
                marginVertical: 20,
                marginHorizontal: 20,
                // backgroundColor: '#ab0afa',
                backgroundColor: Colors.themeColor,
                borderRadius: 8,
                padding: 20,
                marginBottom: 0,
              }}>
              <TouchableOpacity
                style={{flex: 1, textAlign: 'center'}}
                onPress={() => {
                  if (this.state.isMyself) {
                    this.props.navigation.navigate('UserFollowers');
                  }
                }}>
                <View>
                  <Text
                    style={{
                      fontSize: 18,
                      color: '#fff',
                      fontWeight: 'bold',
                      textAlign: 'center',
                    }}>
                    {this.formatNum(user.followerNum)}
                  </Text>
                  <Text
                    style={{
                      fontSize: 16,
                      color: '#fff',
                      textAlign: 'center',
                      marginTop: 4,
                    }}>
                    {I18n.t('user.followers')}
                  </Text>
                </View>
              </TouchableOpacity>
              <TouchableOpacity
                style={{flex: 1}}
                onPress={() => {
                  if (this.state.isMyself) {
                    this.props.navigation.navigate('UserFollowings');
                  }
                }}>
                <View>
                  <Text
                    style={{
                      fontSize: 18,
                      color: '#fff',
                      fontWeight: 'bold',
                      textAlign: 'center',
                    }}>
                    {this.formatNum(user.followingNum)}
                  </Text>
                  <Text
                    style={{
                      fontSize: 16,
                      color: '#fff',
                      textAlign: 'center',
                      marginTop: 4,
                    }}>
                    {I18n.t('user.following')}
                  </Text>
                </View>
              </TouchableOpacity>
              {!this.props.userInfo.disableGift ? (
                <TouchableOpacity
                  style={{flex: 1}}
                  onPress={() => {
                    if (!this.checkWalletConnect()) {
                      return;
                    }
                    if (this.state.isMyself) {
                      this.props.navigation.navigate('UserInvites');
                    }
                  }}>
                  <View>
                    <Text
                      style={{
                        fontSize: 18,
                        color: '#fff',
                        fontWeight: 'bold',
                        textAlign: 'center',
                      }}>
                      {this.formatNum(user.inviteAmout)}
                    </Text>
                    <Text
                      style={{
                        fontSize: 16,
                        color: '#fff',
                        textAlign: 'center',
                        marginTop: 4,
                      }}>
                      {I18n.t('user.invite')}
                    </Text>
                  </View>
                </TouchableOpacity>
              ) : null}
              {!this.props.userInfo.disableGift ? (
                <TouchableOpacity
                  style={{flex: 1}}
                  onPress={() => {
                    if (!this.checkWalletConnect()) {
                      return;
                    }

                    if (this.state.isMyself) {
                      this.props.navigation.push('SelectNTF', {
                        readOnly: true,
                      });
                    }
                  }}>
                  <View>
                    <Text
                      style={{
                        fontSize: 18,
                        color: '#fff',
                        fontWeight: 'bold',
                        textAlign: 'center',
                      }}>
                      {this.formatNum(user.nftAmount)}
                    </Text>
                    <Text
                      style={{
                        fontSize: 16,
                        color: '#fff',
                        textAlign: 'center',
                        marginTop: 4,
                      }}>
                      {I18n.t('user.created')}
                    </Text>
                  </View>
                </TouchableOpacity>
              ) : null}
            </View>
            {/* <Text
              style={{
                color: '#8A7B6C',
                fontSize: 14,
                marginTop: 10,
                marginHorizontal: 20,
              }}>
              {user.bio}
            </Text> */}
          </View>
          {/* {
            !this.props.userInfo.disableGift?(
              <TouchableOpacity style={{marginBottom:20,position:'relative'}}
                onPress={()=>{
                  this.props.navigation.push('AwardCenter');
                }}>
                <Image
                  style={{width:'100%',height:107}}
                  source={require('../../assets/user/award_banner.png')}></Image>
                <Image 
                  style={{position:'absolute',bottom:0,right:0,width:60,height:60}}
                  source={require('../../assets/user/lottery_touch.gif')}></Image>
              </TouchableOpacity>
            ):null
          } */}

          <View
            style={{
              backgroundColor: 'white',
              flex: 1,
              minHeight: height - 88 - 80 - 40,
            }}>
            {this.state.isMyself && !this.props.userInfo.disableGift ? (
              <View style={{width: '100%', paddingLeft: 20, paddingRight: 20}}>
                {/* <TouchableOpacity
                  style={{
                    // backgroundColor: '#efe6ff',
                    backgroundColor: 'white',
                    flexDirection: 'row',
                    alignItems: 'center',
                    height: 40,
                    marginBottom: 20,
                    borderRadius: 20,
                    borderColor: Colors.fontPurpleColorLight,
                    borderWidth: 1,
                  }}
                  onPress={() => {
                    if (this.state.user.joinClub) {
                      this.props.navigation.navigate('MyClub');
                    } else {
                      this.props.navigation.navigate('ApplyClub');
                    }
                  }}>
                  <Image
                    style={{
                      width: 50,
                      height: 50,
                      marginLeft: 20,
                      marginTop: -14,
                    }}
                    source={require('../../assets/user/user_club.png')}
                  />
                  <Text
                    style={{
                      color: '#ab0afa',
                      flex: 1,
                      marginLeft: 10,
                      fontWeight: 'bold',
                      fontSize: 18,
                    }}>
                    {this.state.user.joinClub ? 'My Club' : 'Apply for club'}
                  </Text>
                  <Image
                    style={{
                      width: 10,
                      height: 16,
                      marginRight: 16,
                    }}
                    source={require('../../assets/user/dir_right_purple.png')}
                  />
                </TouchableOpacity> */}
                <TouchableOpacity
                  style={{
                    backgroundColor: '#b991f9',
                    flexDirection: 'row',
                    alignItems: 'center',
                    height: 40,
                    marginBottom: 20,
                    borderRadius: 20,
                  }}
                  onPress={() => {
                    // if (!this.checkWalletConnect()) {
                    //   return;
                    // }
                    // this.props.navigation.navigate('Wallet');
                    this.props.navigation.navigate('NewWallet');
                  }}>
                  <Image
                    style={{
                      width: 46,
                      height: 46,
                      marginLeft: 20,
                      marginTop: -8,
                    }}
                    source={require('../../assets/user/user_wallet.png')}
                  />
                  <Text
                    style={{
                      color: 'white',
                      flex: 1,
                      marginLeft: 10,
                      fontWeight: 'bold',
                      fontSize: 18,
                    }}>
                    Wallet
                  </Text>
                  <Image
                    style={{
                      width: 10,
                      height: 16,
                      marginRight: 16,
                    }}
                    source={require('../../assets/user/dir_right.png')}
                  />
                </TouchableOpacity>
                <TouchableOpacity
                  style={{
                    backgroundColor: '#b991f9',
                    flexDirection: 'row',
                    marginTop: 0.5,
                    alignItems: 'center',
                    height: 40,
                    marginBottom: 20,
                    borderRadius: 20,
                  }}
                  onPress={() => {
                    if (!this.checkWalletConnect()) {
                      return;
                    }
                    this.props.navigation.navigate('SelectNTF', {
                      readOnly: true,
                    });
                  }}>
                  <Image
                    style={{
                      width: 48,
                      height: 48,
                      marginLeft: 20,
                      marginTop: -10,
                    }}
                    source={require('../../assets/user/user_nft.png')}
                  />
                  <Text
                    style={{
                      color: 'white',
                      flex: 1,
                      marginLeft: 10,
                      fontWeight: 'bold',
                      fontSize: 18,
                    }}>
                    NFT Assets
                  </Text>
                  <Image
                    style={{
                      width: 10,
                      height: 16,
                      marginRight: 16,
                    }}
                    source={require('../../assets/user/dir_right.png')}
                  />
                </TouchableOpacity>
                <TouchableOpacity
                  style={{
                    backgroundColor: '#b991f9',
                    flexDirection: 'row',
                    marginTop: 0.5,
                    alignItems: 'center',
                    height: 40,
                    marginBottom: 20,
                    borderRadius: 20,
                  }}
                  onPress={() => {
                    if (!this.checkWalletConnect()) {
                      return;
                    }
                    this.props.navigation.navigate('PriceList');
                  }}>
                  <Image
                    style={{
                      width: 46,
                      height: 46,
                      marginLeft: 20,
                      marginTop: -10,
                    }}
                    source={require('../../assets/user/user_offers.png')}
                  />
                  <Text
                    style={{
                      color: 'white',
                      flex: 1,
                      marginLeft: 10,
                      fontWeight: 'bold',
                      fontSize: 18,
                    }}>
                    Offers
                  </Text>
                  <Image
                    style={{
                      width: 10,
                      height: 16,
                      marginRight: 16,
                    }}
                    source={require('../../assets/user/dir_right.png')}
                  />
                </TouchableOpacity>
                <TouchableOpacity
                  style={{
                    backgroundColor: '#b991f9',
                    flexDirection: 'row',
                    marginTop: 0.5,
                    alignItems: 'center',
                    height: 40,
                    marginBottom: 20,
                    borderRadius: 20,
                  }}
                  onPress={() => {
                    if (!this.checkWalletConnect()) {
                      return;
                    }
                    this.props.navigation.navigate('MyAuctions');
                  }}>
                  <Image
                    style={{
                      width: 48,
                      height: 48,
                      marginLeft: 20,
                      marginTop: -10,
                    }}
                    source={require('../../assets/user/user_auction.png')}
                  />
                  <Text
                    style={{
                      color: 'white',
                      flex: 1,
                      marginLeft: 10,
                      fontWeight: 'bold',
                      fontSize: 18,
                    }}>
                    My Auctions
                  </Text>
                  <Image
                    style={{
                      width: 10,
                      height: 16,
                      marginRight: 16,
                    }}
                    source={require('../../assets/user/dir_right.png')}
                  />
                </TouchableOpacity>
              </View>
            ) : null}
            {this.props.navigation.state.params &&
            this.props.navigation.state.params.showLogout ? (
              <View style={{backgroundColor: 'white', width: '100%'}}>
                <LinearButton
                  text="Logout"
                  buttonStyle={{
                    backgroundColor: '#FFCB26',
                    marginBottom: 50,
                    width: 240,
                    alignSelf: 'center',
                  }}
                  onPress={() => {
                    this._showAlert({
                      content: 'Are you sure logout?',
                      cancelTitle: 'Cancel',
                      alertOkPress: this.logout,
                    });
                  }}
                />
              </View>
            ) : null}
          </View>
        </ScrollView>
        <Modal animationType="fade" transparent visible={signModal}>
          <View
            style={{
              justifyContent: 'flex-end',
              flex: 1,
              backgroundColor: 'rgba(151,151,151,0.5)',
            }}>
            <TouchableWithoutFeedback
              onPress={() => {
                this.setState({
                  signModal: false,
                  signAnimModal: false,
                });
              }}>
              <View
                style={{
                  flex: 1,
                  width: '100%',
                  position: 'absolute',
                  top: 0,
                  left: 0,
                  bottom: 0,
                  alignItems: 'center',
                  justifyContent: 'center',
                }}>
                <LinearGradient
                  start={{x: 0, y: 1}}
                  end={{x: 1, y: 1}}
                  colors={['#6601F5', '#CE18EC']}
                  style={{
                    borderRadius: 8,
                    width: 350,
                    flexDirection: 'column',
                  }}>
                  <View
                    style={{
                      flexDirection: 'column',
                      alignItems: 'center',
                      paddingTop: 50,
                      paddingBottom: 20,
                      width: '100%',
                    }}>
                    <Image
                      style={{
                        width: 240,
                        height: 22,
                      }}
                      source={require('../../assets/user/signin_bonus.png')}></Image>
                    <Text
                      style={{
                        color: '#fff',
                        fontSize: 16,
                        marginTop: 20,
                        fontWeight: 'bold',
                      }}>
                      Keep Sign in {this.state.user.signinDays} DAY
                    </Text>
                    <Text
                      style={{
                        color: '#fff',
                        fontSize: 16,
                        marginTop: 2,
                        fontWeight: 'bold',
                      }}>
                      Daily sign in to collect coins!
                    </Text>
                  </View>
                  <View
                    style={{
                      backgroundColor: '#fff',
                      paddingTop: 30,
                      paddingBottom: 20,
                      borderTopRightRadius: 8,
                      borderTopLeftRadius: 8,
                      alignItems: 'center',
                    }}>
                    <View
                      style={{
                        flexDirection: 'row',
                        alignItems: 'center',
                        justifyContent: 'center',
                      }}>
                      <View
                        style={{
                          width: 70,
                          height: 77,
                          marginRight: 10,
                          alignItems: 'center',
                          justifyContent: 'center',
                          position: 'relative',
                          backgroundColor: '#e2e2e2',
                          borderRadius: 8,
                        }}>
                        <Image
                          style={{
                            width: 30,
                            height: 35,
                          }}
                          source={require('../../assets/user/1signin.png')}></Image>
                        <Image
                          style={{
                            width: 30,
                            height: 32,
                            position: 'absolute',
                            left: 0,
                            top: 0,
                          }}
                          source={
                            this.state.user.signinDays >= 1
                              ? require('../../assets/user/checked_badge.png')
                              : require('../../assets/user/uncheck_badge.png')
                          }></Image>
                        <Text
                          style={{
                            color: '#fff',
                            fontSize: 14,
                            position: 'absolute',
                            top: 4,
                            left: 4,
                          }}>
                          1
                        </Text>
                        <View
                          style={{
                            position: 'absolute',
                            left: 0,
                            right: 0,
                            bottom: 0,
                            height: 18,
                            alignContent: 'center',
                            justifyContent: 'center',
                            borderBottomLeftRadius: 8,
                            borderBottomRightRadius: 8,
                            backgroundColor:
                              this.state.user.signinDays >= 1
                                ? '#ff9600'
                                : '#cbb9ff',
                          }}>
                          <Text
                            style={{
                              width: '100%',
                              textAlign: 'center',
                              fontSize: 12,
                              color: '#fff',
                            }}>
                            1 SIGNIN
                          </Text>
                        </View>
                      </View>
                      <View
                        style={{
                          width: 70,
                          height: 77,
                          marginRight: 10,
                          alignItems: 'center',
                          justifyContent: 'center',
                          position: 'relative',
                          backgroundColor: '#e2e2e2',
                          borderRadius: 8,
                        }}>
                        <Image
                          style={{
                            width: 30,
                            height: 35,
                          }}
                          source={require('../../assets/user/1signin.png')}></Image>
                        <Image
                          style={{
                            width: 30,
                            height: 32,
                            position: 'absolute',
                            left: 0,
                            top: 0,
                          }}
                          source={
                            this.state.user.signinDays >= 2
                              ? require('../../assets/user/checked_badge.png')
                              : require('../../assets/user/uncheck_badge.png')
                          }></Image>
                        <Text
                          style={{
                            color: '#fff',
                            fontSize: 14,
                            position: 'absolute',
                            top: 4,
                            left: 4,
                          }}>
                          2
                        </Text>
                        <View
                          style={{
                            position: 'absolute',
                            left: 0,
                            right: 0,
                            bottom: 0,
                            height: 18,
                            alignContent: 'center',
                            justifyContent: 'center',
                            borderBottomLeftRadius: 8,
                            borderBottomRightRadius: 8,
                            backgroundColor:
                              this.state.user.signinDays >= 2
                                ? '#ff9600'
                                : '#cbb9ff',
                          }}>
                          <Text
                            style={{
                              width: '100%',
                              textAlign: 'center',
                              fontSize: 12,
                              color: '#fff',
                            }}>
                            1 SIGNIN
                          </Text>
                        </View>
                      </View>
                      <View
                        style={{
                          width: 70,
                          height: 77,
                          marginRight: 10,
                          alignItems: 'center',
                          justifyContent: 'center',
                          position: 'relative',
                          backgroundColor: '#e2e2e2',
                          borderRadius: 8,
                        }}>
                        <Image
                          style={{
                            width: 30,
                            height: 35,
                          }}
                          source={require('../../assets/user/5signin.png')}></Image>
                        <Image
                          style={{
                            width: 30,
                            height: 32,
                            position: 'absolute',
                            left: 0,
                            top: 0,
                          }}
                          source={
                            this.state.user.signinDays >= 3
                              ? require('../../assets/user/checked_badge.png')
                              : require('../../assets/user/uncheck_badge.png')
                          }></Image>
                        <Text
                          style={{
                            color: '#fff',
                            fontSize: 14,
                            position: 'absolute',
                            top: 4,
                            left: 4,
                          }}>
                          3
                        </Text>
                        <View
                          style={{
                            position: 'absolute',
                            left: 0,
                            right: 0,
                            bottom: 0,
                            height: 18,
                            alignContent: 'center',
                            justifyContent: 'center',
                            borderBottomLeftRadius: 8,
                            borderBottomRightRadius: 8,
                            backgroundColor:
                              this.state.user.signinDays >= 3
                                ? '#ff9600'
                                : '#cbb9ff',
                          }}>
                          <Text
                            style={{
                              width: '100%',
                              textAlign: 'center',
                              fontSize: 12,
                              color: '#fff',
                            }}>
                            5 SIGNIN
                          </Text>
                        </View>
                      </View>
                      <View
                        style={{
                          width: 70,
                          height: 77,
                          alignItems: 'center',
                          justifyContent: 'center',
                          position: 'relative',
                          backgroundColor: '#e2e2e2',
                          borderRadius: 8,
                        }}>
                        <Image
                          style={{
                            width: 30,
                            height: 35,
                          }}
                          source={require('../../assets/user/1signin.png')}></Image>
                        <Image
                          style={{
                            width: 30,
                            height: 32,
                            position: 'absolute',
                            left: 0,
                            top: 0,
                          }}
                          source={
                            this.state.user.signinDays >= 4
                              ? require('../../assets/user/checked_badge.png')
                              : require('../../assets/user/uncheck_badge.png')
                          }></Image>
                        <Text
                          style={{
                            color: '#fff',
                            fontSize: 14,
                            position: 'absolute',
                            top: 4,
                            left: 4,
                          }}>
                          4
                        </Text>
                        <View
                          style={{
                            position: 'absolute',
                            left: 0,
                            right: 0,
                            bottom: 0,
                            height: 18,
                            alignContent: 'center',
                            justifyContent: 'center',
                            borderBottomLeftRadius: 8,
                            borderBottomRightRadius: 8,
                            backgroundColor:
                              this.state.user.signinDays >= 4
                                ? '#ff9600'
                                : '#cbb9ff',
                          }}>
                          <Text
                            style={{
                              width: '100%',
                              textAlign: 'center',
                              fontSize: 12,
                              color: '#fff',
                            }}>
                            1 SIGNIN
                          </Text>
                        </View>
                      </View>
                    </View>

                    <View
                      style={{
                        flexDirection: 'row',
                        alignItems: 'center',
                        justifyContent: 'center',
                        marginTop: 10,
                      }}>
                      <View
                        style={{
                          width: 70,
                          height: 77,
                          marginRight: 10,
                          alignItems: 'center',
                          justifyContent: 'center',
                          position: 'relative',
                          backgroundColor: '#e2e2e2',
                          borderRadius: 8,
                        }}>
                        <Image
                          style={{
                            width: 30,
                            height: 35,
                          }}
                          source={require('../../assets/user/1signin.png')}></Image>
                        <Image
                          style={{
                            width: 30,
                            height: 32,
                            position: 'absolute',
                            left: 0,
                            top: 0,
                          }}
                          source={
                            this.state.user.signinDays >= 5
                              ? require('../../assets/user/checked_badge.png')
                              : require('../../assets/user/uncheck_badge.png')
                          }></Image>
                        <Text
                          style={{
                            color: '#fff',
                            fontSize: 14,
                            position: 'absolute',
                            top: 4,
                            left: 4,
                          }}>
                          5
                        </Text>
                        <View
                          style={{
                            position: 'absolute',
                            left: 0,
                            right: 0,
                            bottom: 0,
                            height: 18,
                            alignContent: 'center',
                            justifyContent: 'center',
                            borderBottomLeftRadius: 8,
                            borderBottomRightRadius: 8,
                            backgroundColor:
                              this.state.user.signinDays >= 5
                                ? '#ff9600'
                                : '#cbb9ff',
                          }}>
                          <Text
                            style={{
                              width: '100%',
                              textAlign: 'center',
                              fontSize: 12,
                              color: '#fff',
                            }}>
                            1 SIGNIN
                          </Text>
                        </View>
                      </View>
                      <View
                        style={{
                          width: 70,
                          height: 77,
                          marginRight: 10,
                          alignItems: 'center',
                          justifyContent: 'center',
                          position: 'relative',
                          backgroundColor: '#e2e2e2',
                          borderRadius: 8,
                        }}>
                        <Image
                          style={{
                            width: 30,
                            height: 35,
                          }}
                          source={require('../../assets/user/1signin.png')}></Image>
                        <Image
                          style={{
                            width: 30,
                            height: 32,
                            position: 'absolute',
                            left: 0,
                            top: 0,
                          }}
                          source={
                            this.state.user.signinDays >= 6
                              ? require('../../assets/user/checked_badge.png')
                              : require('../../assets/user/uncheck_badge.png')
                          }></Image>
                        <Text
                          style={{
                            color: '#fff',
                            fontSize: 14,
                            position: 'absolute',
                            top: 4,
                            left: 4,
                          }}>
                          6
                        </Text>
                        <View
                          style={{
                            position: 'absolute',
                            left: 0,
                            right: 0,
                            bottom: 0,
                            height: 18,
                            alignContent: 'center',
                            justifyContent: 'center',
                            borderBottomLeftRadius: 8,
                            borderBottomRightRadius: 8,
                            backgroundColor:
                              this.state.user.signinDays >= 6
                                ? '#ff9600'
                                : '#cbb9ff',
                          }}>
                          <Text
                            style={{
                              width: '100%',
                              textAlign: 'center',
                              fontSize: 12,
                              color: '#fff',
                            }}>
                            1 SIGNIN
                          </Text>
                        </View>
                      </View>
                      <View
                        style={{
                          width: 150,
                          height: 77,
                          alignItems: 'center',
                          justifyContent: 'center',
                          position: 'relative',
                          backgroundColor: '#e2e2e2',
                          borderRadius: 8,
                        }}>
                        <Image
                          style={{
                            width: 88,
                            height: 35,
                          }}
                          source={require('../../assets/user/10signin.png')}></Image>
                        <Image
                          style={{
                            width: 30,
                            height: 32,
                            position: 'absolute',
                            left: 0,
                            top: 0,
                          }}
                          source={
                            this.state.user.signinDays >= 7
                              ? require('../../assets/user/checked_badge.png')
                              : require('../../assets/user/uncheck_badge.png')
                          }></Image>
                        <Text
                          style={{
                            color: '#fff',
                            fontSize: 14,
                            position: 'absolute',
                            top: 4,
                            left: 4,
                          }}>
                          7
                        </Text>
                        <View
                          style={{
                            position: 'absolute',
                            left: 0,
                            right: 0,
                            bottom: 0,
                            height: 18,
                            alignContent: 'center',
                            justifyContent: 'center',
                            borderBottomLeftRadius: 8,
                            borderBottomRightRadius: 8,
                            backgroundColor:
                              this.state.user.signinDays >= 7
                                ? '#ff9600'
                                : '#cbb9ff',
                          }}>
                          <Text
                            style={{
                              width: '100%',
                              textAlign: 'center',
                              fontSize: 12,
                              color: '#fff',
                            }}>
                            10 SIGNIN
                          </Text>
                        </View>
                      </View>
                    </View>
                    <Image
                      style={{
                        width: 235,
                        height: 78,
                        marginTop: 30,
                      }}
                      source={require('../../assets/user/signin_gift.png')}></Image>
                    {hasSignin ? (
                      <LinearButton
                        text="Signed in successfully"
                        buttonStyle={{
                          backgroundColor: '#FFCB26',
                          paddingHorizontal: 20,
                          marginTop: 20,
                        }}
                        onPress={() => {}}
                      />
                    ) : (
                      <LinearButton
                        text="SIGN IN NOW"
                        buttonStyle={{
                          backgroundColor: '#FFCB26',
                          marginTop: 20,
                          width: 160,
                        }}
                        onPress={this._signin}
                      />
                    )}
                  </View>
                </LinearGradient>
              </View>
            </TouchableWithoutFeedback>
            {signAnimModal ? (
              <TouchableWithoutFeedback
                onPress={() => {
                  this.setState({
                    signAnimModal: false,
                  });
                }}>
                <View
                  style={{
                    flex: 1,
                    width: '100%',
                    position: 'absolute',
                    backgroundColor: 'rgba(0,0,0,0.8)',
                    top: 0,
                    left: 0,
                    bottom: 0,
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}>
                  <Image
                    source={require('../../assets/user/signin_anim.png')}
                    style={{
                      width: 115,
                      height: 157,
                    }}></Image>
                  <Text
                    style={{
                      fontSize: 18,
                      color: '#fff',
                      marginTop: 20,
                      fontWeight: 'bold',
                    }}>
                    Successful!
                  </Text>
                  <Text
                    style={{
                      paddingHorizontal: 30,
                      fontSize: 12,
                      color: '#fff',
                      marginTop: 10,
                      fontWeight: 'bold',
                    }}>
                    SIGNIN token has been sent to your account.
                  </Text>
                  <Text
                    style={{
                      paddingHorizontal: 30,
                      fontSize: 12,
                      color: '#fff',
                      fontWeight: 'bold',
                    }}>
                    Reward might be delayed,please wait patiently.
                  </Text>
                </View>
              </TouchableWithoutFeedback>
            ) : null}
          </View>
        </Modal>
      </View>
    );
  };
}

const mapStateToProps = (state) => ({
  userInfo: state.User.userInfo,
});

const mapDispatchToProps = (dispatch) => ({
  userLogout: (item) => dispatch(userLogout()),
});

export default connect(mapStateToProps, mapDispatchToProps)(UserInfoScreen);
